import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from 'antd-mobile'
import SearchInput from "../searchInput/SearchInput"
import "./Index.scss";
import myaxios from "../../utils/myaxios"
import { withRouter } from 'react-router-dom'

class Index extends Component {
  state = {
    swiper_list: [],
    imgHeight: 175,
    catitems: [],
    productData: []
  }
  //轮播图跳转
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
  handleCatItemClick = (params) => {
    this.props.history.push("/category");
  }
  handleImgClick= () => {
    this.props.history.push("/goodList/query='123'");
  }
  

  componentDidMount() {
    myaxios.get("home/swiperdata").then(res => {
      this.setState({
        swiper_list: res,
      })
    }).catch(err => {
      console.log(err)
    })

    myaxios.get("/home/catitems").then(res => {
      this.setState({
        catitems: res
      })
    }).catch(err => {
      console.log(err)
    })

    myaxios.get("/home/floordata").then(res => {
      this.setState({
        productData: res
      })
    }).catch(err => {
      console.log(err)
    })
  }

  render() {
    return (
      <div className="shop-index">
        <div className="index-nav">
          <NavBar className="index-nav-title">云购商城</NavBar>
        </div>
        <div className="index-search">
          <SearchInput></SearchInput>
        </div>
        <div className="index-swiper">
          <Carousel
            autoplay={true}
            infinite
            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            afterChange={index => console.log('slide to', index)}
          >
            {this.state.swiper_list.map(val => (
              <div
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        <div className="index-catitems">
          <Flex>
            {
              this.state.catitems.map(v => {
                return <Flex.Item key={v.name} className="catitems-items" onClick={this.handleCatItemClick}>
                  <img src={v.image_src} alt="" />
                </Flex.Item>
              })
            }
          </Flex>
        </div>
        <div className="index-product">
          {
            this.state.productData.map(v => {
              return <div key={v.floor_title.image_src} className="productData-item">
                <div className="product-title">
                  <img src={v.floor_title.image_src} alt="" />
                </div>
                <div className="product-list">
                  {
                    v.product_list.map(i => {
                      return <div className="image-list-item" key={i.image_src}
                        onClick={this.handleImgClick}>
                        <img src={i.image_src} alt="" />
                      </div>
                    })
                  }
                </div>
              </div>
            })
          }
        </div>
      </div>
    )
  }
}

export default withRouter(Index)